import React from 'react';
import { Row, Col, Form, Input, Spin, Icon, Select } from 'antd';
import Button from '../ButtonPc';
import RangePicker from '../RangePicker';
import styles from '../index.less';

const { TextArea } = Input;
const { Option } = Select;

const WorkExperienceItem = ({ form, required = false, index, i, dictObj, dictObjLoading, remove, ...rest }) => {
    const { getFieldDecorator } = form;

    return (
        <div className={styles.formWrapNew}>
            <div className={styles.itemHead}>
                <div>工作经历{i + 1}</div>
                <Icon
                    type="close-circle"
                    theme="filled"
                    style={{ fontSize: 16, color: '#49536C' }}
                    onClick={() => remove(index)}
                />
            </div>
            <Row gutter={120} {...rest}>
                <Col lg={12} md={24}>
                    <Form.Item label="起止时间">
                        {getFieldDecorator(`workStartTime[${index}]`, {
                            rules: [{ required, message: '请选择起止时间' }]
                        })(<RangePicker format="YYYY/MM/DD" style={{ width: '100%' }} placeholder="请选择起止时间" />)}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="行业">
                        <Spin spinning={dictObjLoading}>
                            {getFieldDecorator(`workIndustryType[${index}]`, {
                                initialValue: undefined
                            })(
                                <Select
                                    placeholder="请选择行业"
                                    allowClear
                                    getPopupContainer={trigger => trigger.parentNode}
                                    style={{ width: '100%' }}
                                >
                                    {dictObj?.industryType?.map(item => (
                                        <Option key={item.dictValue} value={item.dictValue}>
                                            {item.dictName}
                                        </Option>
                                    ))}
                                </Select>
                            )}
                        </Spin>
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="公司">
                        {getFieldDecorator(`workCompanyName[${index}]`, {
                            initialValue: '',
                            rules: [
                                {
                                    required,
                                    message: '请输入公司',
                                    whitespace: true
                                }
                            ]
                        })(<Input placeholder="请输入公司" maxLength={100} allowClear />)}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="所在部门">
                        {getFieldDecorator(`workDepartmentName[${index}]`, {
                            initialValue: ''
                        })(<Input placeholder="请输入所在部门" maxLength={100} allowClear />)}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="职位">
                        {getFieldDecorator(`workPositionName[${index}]`, {
                            initialValue: '',
                            rules: [
                                {
                                    required,
                                    message: '请输入职位',
                                    whitespace: true
                                }
                            ]
                        })(<Input placeholder="请输入职位" maxLength={100} allowClear />)}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="离职原因">
                        {getFieldDecorator(`workLeaveReason[${index}]`, {
                            initialValue: ''
                        })(<Input placeholder="请输入离职原因" maxLength={100} allowClear />)}
                    </Form.Item>
                </Col>
                <Col span={24}>
                    <Form.Item label="工作职责">
                        {getFieldDecorator(`workWorkDesc[${index}]`, {
                            initialValue: '',
                            rules: [
                                {
                                    required,
                                    message: '请输入工作职责',
                                    whitespace: true
                                }
                            ]
                        })(
                            <TextArea
                                placeholder="请输入工作职责"
                                autoSize={{ minRows: 3, maxRows: 6 }}
                                maxLength={800}
                                style={{ marginTop: 4 }}
                            />
                        )}
                    </Form.Item>
                </Col>
            </Row>
        </div>
    );
};

const WorkExperience = ({ form, dictObj, dictObjLoading, required = false }) => {
    const { getFieldDecorator } = form;

    const addWork = () => {
        const workKeys = form.getFieldValue('workKeys');
        const nowId = workKeys[workKeys.length - 1] + 1 || 0;
        const nextKeys = workKeys.concat(nowId);
        form.setFieldsValue({
            workKeys: nextKeys
        });
    };

    const removeWork = React.useCallback(k => {
        const workKeys = form.getFieldValue('workKeys');
        form.setFieldsValue({
            workKeys: workKeys.filter(key => key !== k)
        });
    }, []);

    getFieldDecorator('workKeys', { initialValue: [] });
    const workKeys = form.getFieldValue('workKeys');
    return (
        <>
            {workKeys.map((key, i) => (
                <WorkExperienceItem
                    form={form}
                    key={key}
                    index={key}
                    i={i}
                    dictObj={dictObj}
                    dictObjLoading={dictObjLoading}
                    remove={removeWork}
                    required={required}
                />
            ))}
            <div style={{ margin: '0 0 24px 0' }}>
                <Button block className={styles.addBtn} onClick={addWork} disabled={workKeys.length >= 10}>
                    <Icon type="plus" /> 添加工作经历
                </Button>
            </div>
        </>
    );
};

export default WorkExperience;
